<template>
  <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-item label="用户头像">
      <a-upload
        name="avatar"
        list-type="picture-card"
        class="avatar-uploader"
        :show-upload-list="false"
        action="http://localhost:3000/users/imgHead"
        :data="{ uid: formState.uid }"
        :before-upload="beforeUpload"
        @change="handleChange"
      >
        <img
          v-if="imageUrl"
          :src="imageUrl"
          alt="avatar"
          style="max-height: 108px"
        />
        <div v-else>
          <loading-outlined v-if="loading"></loading-outlined>
          <plus-outlined v-else></plus-outlined>
          <div class="ant-upload-text">Upload</div>
        </div>
      </a-upload>
    </a-form-item>
    <a-form-item label="用户昵称">
      <a-input v-model:value="formState.name" />
    </a-form-item>
    <a-form-item label="出生日期">
      <a-date-picker
        v-model:value="formState.birth"
        format="YYYY-MM-DD"
        type="date"
        style="width: 100%"
      />
    </a-form-item>
    <a-form-item label="性别">
      <a-radio-group v-model:value="formState.sex">
        <a-radio value="1">男</a-radio>
        <a-radio value="2">女</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="个人介绍">
      <a-input v-model:value="formState.desc" type="textarea" />
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 14, offset: 10 }">
      <a-button type="primary" @click="onSubmit">保存更改</a-button>
    </a-form-item>
  </a-form>
</template>
<script>
import { defineComponent, reactive, ref } from "vue";
import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { dopersonal, personal } from "../../api/users";

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}

export default defineComponent({
  components: {
    LoadingOutlined,
    PlusOutlined,
  },
  setup() {
    const formState = reactive({
      uid: "",
      name: null,
      birth: null,
      sex: null,
      desc: null,
    });

    const loading = ref(false);
    const imageUrl = ref("");

    const onSubmit = () => {
      // console.log("submit!", toRaw(formState));
      dopersonal({
        url: "/users/doPersonal",
        name: formState.name,
        birth: formState.birth,
        sex: formState.sex,
        desc: formState.desc,
        success: (res) => {
          message.info(res.data);
          // console.log(res);
        },
        err: (err) => {
          console.log(err);
        },
      });
    };

    personal({
      url: "/users/Personal",
      success: (res) => {
        // console.log(res.data);
        formState.uid = res.data.uid;
        formState.name = res.data.uname;
        formState.birth = res.data.birth;
        formState.sex = res.data.sex;
        formState.desc = res.data.uinfr;
        imageUrl.value = "http://localhost:3000/" + res.data.img_head;
        sessionStorage.setItem("imgUrl", res.data.img_head);
      },
      err: (err) => {
        console.log(err);
      },
    });

    const handleChange = (info) => {
      if (info.file.status === "uploading") {
        loading.value = true;
        return;
      }
      if (info.file.status === "done") {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (base64Url) => {
          imageUrl.value = base64Url;
          loading.value = false;
        });
      }
      console.log(info.file.response.url);
      if (info.file.status === "error") {
        loading.value = false;
        message.error("upload error");
      }
    };

    const beforeUpload = (file) => {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        message.error("图片类型必须是jpg或png！");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        message.error("图片大小必须小于2MB!");
      }
      return isJpgOrPng && isLt2M;
    };

    return {
      labelCol: {
        span: 4,
        offset: 2,
      },
      wrapperCol: {
        span: 12,
      },
      formState,
      onSubmit,
      // fileList,
      loading,
      imageUrl,
      handleChange,
      beforeUpload,
    };
  },
});
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>